/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import React, { Component } from 'react'
import Nowplaying from './films/Nowplaying'
import Comingsoon from './films/Comingsoon'
import {NavLink, Redirect, Route, Switch} from 'react-router-dom'
import { Button, Space, Swiper, Toast } from 'antd-mobile'

import style from './css/Film.module.css'

console.log(style)
export default class Films extends Component {

    render() {
        const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']

        return (
            <div className={style.film + " aaaa"}>
                <div style={{height:"200px",background:"yellow"}}>
                    <Swiper>{
                            colors.map((color, index) => (
                                <Swiper.Item key={index}>
                                  <div
                                    className={style.content}
                                    style={{ background: color }}
                                    onClick={() => {
                                      Toast.show(`你点击了卡片 ${index + 1}`)
                                    }}
                                  >
                                    {index + 1}
                                  </div>
                                </Swiper.Item>
                              ))
                        }</Swiper>
                </div>

                <ul>
                    <li>
                        <NavLink to="/films/nowplaying" activeClassName={style.kerwinactive}>正在热映</NavLink>
                    </li>
                    <li>
                        <NavLink to="/films/comingsoon" activeClassName={style.kerwinactive}>即将上映</NavLink>
                    </li>
                </ul>

                {/* 路由配置 嵌套路由 */}
            {/* <Nowplaying/> */}
                <Switch>
                    <Route path="/films/nowplaying" component={Nowplaying}/>
                    <Route path="/films/comingsoon" component={Comingsoon}/>
                    <Redirect from="/films" to="/films/nowplaying"/> 
                </Switch>

            </div>
        )
    }
}
